<template>
  <div>
    <div class="share">
      <img class="logo"
           src="../img/logo.png" />
      <div class="title">天天老友</div>
      <a class="down"
         :href="aurl">下载客户端开始畅聊</a>
    </div>
    <div class="modal"
         v-show="show">
      <div class="cover">
        <div class="top">
          <div>即将离开</div>
          <div>前往“老友APP”</div>
        </div>
        <div class="bottom">
          <span @click="cancel">取消</span>
          <span class="go"
                @click="toApp">前往</span>
        </div>
      </div>
      <a :href="durl"
         style="display:none"
         id="openApp"></a>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      aurl: "http://dt.ttlaoyou.com/apk/app.apk",
      durl: "ttlaoyouapp://note/?",
      show: true
    }
  },
  mounted () {
    var time = new Date().getTime()
    this.aurl = "http://dt.ttlaoyou.com/apk/app.apk?time=" + time
    var url = location.href
    var self = this
    var urlarr = url.split('callback=')
    this.durl = this.durl + 'callback=' + decodeURIComponent(urlarr[1])
    var dom = document.getElementById("openApp")
    this.$nextTick(() => {
      window.location = self.durl
      dom.click()
    })
  },
  methods: {
    toApp () {
      var dom = document.getElementById("openApp")
      dom.click()
      this.show = false
    },
    cancel () {
      this.show = false
    }
  }
}
</script>
<style lang="less">
.share {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url('../img/background.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
.logo {
  width: 2.94rem;
  height: 2.94rem;
  margin: 0 auto;
  margin-top: 1.29rem;
}
.title {
  color: #eb1111;
  font-size: 0.66rem;
  margin-top: 0.5rem;
  text-align: center;
}
.down {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.26rem;
  height: 1.25rem;
  line-height: 1.25rem;
  background: rgba(236, 185, 38, 1);
  box-shadow: 0 0.06rem 0.08rem 0.05rem rgba(193, 101, 41, 0.5);
  border-radius: 0.3rem;
  color: #fff;
  font-size: 0.46rem;
  text-align: center;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  color: #333;
  text-align: center;
  .cover {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 0.3rem;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 60%;
    height: 20%;
    font-size: 0.3rem;
    .top {
      height: 65%;
      box-sizing: border-box;
      padding: 0.5rem 0;
    }
    .bottom {
      height: 35%;
      border-top: 1px solid #ccc;
      display: flex;
      span:first-child {
        width: 50%;
      }
      span {
        line-height: 0.8rem;
      }
      .go {
        flex: auto;
        color: red;
        border-left: 1px solid #ccc;
        a {
          color: inherit;
        }
      }
    }
  }
}
</style>
